<!--
 * @Author: 谢陈洁
 * @Date: 2025-06-23 09:00:32
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-07-18 13:10:14
 * @Description: file content
-->
<template>
  <div class="page">
    <SearchForm :form-items="searchFormColumns" @search="fetchData" />
    <el-card class="table-card">
      <div class="action-box">
        <add-button @click="openDialog()">添加参数字典</add-button>
      </div>
      <ProTable
        :columns="columns"
        :data="dataList"
        :loading="loading"
        showIndex
        @link-click="handleDictItemEdit"
      >
        <template #action="{ row }">
          <edit-button size="small" @click="openDialog(row)">编辑</edit-button>
          <!-- <add-button size="small" @click="handleDictItemEdit(row)">编辑项</add-button> -->
          <del-button size="small" @click="handleDelete(row.id)">删除</del-button>
        </template>
      </ProTable>
    </el-card>
    <dict-items :title="currentRow?.name" :code="currentRow?.code" ref="dicItemsRef" />
    <base-drawer
      v-model="dialogVisible"
      title="参数字典编辑"
      @ok="handleSubmit"
      @cancel="closeDialog"
    >
      <dynamic-form
        ref="formRef"
        :form-config="formColumns"
        v-model="formData"
        @submit-success="handleSubmitSuccess"
      ></dynamic-form>
    </base-drawer>
  </div>
</template>
<script setup lang="ts">
  import { deleteDict, getDictionary, saveDict } from '@/services/apis/system/dictionary'
  import SearchForm from '@/components/ProForm/SearchForm.vue'
  import dictItems from './components/dict-items.vue'
  import { columns, formColumns, searchFormColumns } from './config'
  import { useTableData, useDeleteConfirm, useFormDialog } from '@/hooks'
  const dicItemsRef = ref() // 字典项组件引用
  const currentRow = ref(null) // 当前行数据
  // 表格数据
  const { dataList, loading, fetchData } = useTableData(getDictionary, { hasPagination: false })
  // 使用删除确认hook
  const { handleDelete } = useDeleteConfirm(deleteDict, fetchData)
  // 添加字典项
  const handleDictItemEdit = (record: any) => {
    currentRow.value = record
    dicItemsRef.value.open(record.code)
  }

  const {
    formRef,
    dialogVisible,
    formData,
    openDialog,
    closeDialog,
    handleSubmit,
    handleSubmitSuccess
  } = useFormDialog(saveDict, fetchData)

  onMounted(() => {
    fetchData()
  })
</script>
<style lang="scss" scoped></style>
